<!--
 * @Author: 又帅又爱学习 501879094@qq.com
 * @Date: 2022-03-28 17:41:14
 * @LastEditors: 又帅又爱学习 501879094@qq.com
 * @LastEditTime: 2022-10-17 17:43:55
 * @FilePath: /vue_demo/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="$store.state.routers[0].id"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item v-for="(item, index) of $store.state.routers" :key="index" :index="item.id">
            <router-link :to="item.path">{{ item.title }}</router-link>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  created() {
    // routers(newValue, oldValue) {
    console.log('routers---', this.$store.state.routers)
    // }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    height: 100vh;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height: 100vh;
  }
</style>
